<template>
<div>
    <div>
        <van-nav-bar title="请假详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="heightF">
        <van-cell-group>

            <!-- <van-card :num="item" :price="item" desc="描述信息" :title="item" thumb="https://img.yzcdn.cn/vant/ipad.jpeg"> -->
            <van-card>
                <template #tags>
                    <van-cell :value=organizationName>
                        <!-- 使用 title 插槽来自定义标题 -->
                        <template #title :value=recordType>
                            <van-tag type="primary" size="large">{{abroadPassportuserName}}</van-tag>

                        </template>

                    </van-cell>
                    <van-cell title="状态" :value=recordStatusContent />
                    <van-cell title="请假类型" :value=recordType />
                    <div v-if="burujia">
                        <van-cell title="婴儿出生日期" :value=birthday />
                    </div>
                    <!-- <van-cell title="所属部门" :value=organizationName /> -->
                    <van-cell title="开始时间" v-model=planStartTime />
                    <van-cell title="上下午" :value=planStartDetailTime />
                    <van-cell title="结束时间" :value=planEndTime />
                    <van-cell title="上下午" :value=planEndDetailTime />
                    <van-cell title="时长" :value=planSumTime />
                    <div v-if="sangjia">
                        <van-cell title="路程往返天数" :value=distanceTime />
                        <van-cell title="地点" :value=place />
                    </div>
                    <div v-if="chanjia">
                        <van-cell title="类别" :value=contraceptionType />
                        <van-cell title="难产" :value=nanchan />
                        <van-cell title="胎儿数量" :value=number />
                    </div>
                    <div v-if="liuchan">
                        <van-cell title="类别" :value=contraceptionType />
                        <van-cell title="怀孕时间" :value=huaiyunshijian />
                    </div>
                    <div v-if="jyj">
                        <van-cell title="类别" :value=contraceptionType />
                    </div>
                    <div v-if="pcj">
                        <van-cell title="类别" :value=contraceptionType />
                    </div>
                    <div v-if="hlj">
                        <van-cell title="是否为独生子女" :value=isOnlyChild />
                        <van-cell title="父母出生日期" :value=parentBirthday />
                        <van-cell title="医院名称" :value=hospitalName />
                    </div>
                    <van-cell title="是否离开广州" :value=isLeaveGz />
                    <van-field v-model="reson" rows="3" autosize label="请假原因" input-align="right" type="textarea" :placeholder=reson />
                </template>
            </van-card>
            <van-card>
                <template #tags>
                    <van-cell>
                        <van-steps direction="vertical" :active='dataLengh'>
                            <van-step v-for="(item,index) in taskData" :key="index">
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.userName">{{item.userName}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.taskName">{{item.taskName}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.createTime">{{getLocalTime(item.createTime)}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.auditResult">{{item.auditResult == 0 ? '不同意':'同意'}}</h4>

                                <!-- <p>2016-07-12 12:40</p> -->
                            </van-step>
                        </van-steps>
                    </van-cell>

                </template>

            </van-card>
        </van-cell-group>
    </div>
    <div v-if="myself">
        <!-- <van-button type="primary" block v-if="tijiao" @click="save()">提交</van-button> -->
        <van-button type="info" block v-if='chehui' @click="ch()">撤回</van-button>
        <!-- <van-button type="warning" block v-if='shanchu' @click="sc()">删除</van-button> -->
        <!-- <van-button type="danger" block v-if='bianji' @click="bj( recordId,recordtype)">编辑</van-button> -->
        <div>

            <van-col span="8">
                <van-button type="primary" block v-if="tijiao" @click="save()">提交</van-button>
            </van-col>
            <van-col span="8">
                <van-button type="warning" block v-if='shanchu' @click="sc()">删除</van-button>
            </van-col>
            <van-col span="8">
                <van-button type="danger" block v-if='bianji' @click="bj( recordId,recordtype)">编辑</van-button>
            </van-col>

        </div>

    </div>

    <div v-if="approval">
        <van-col span="12">
            <van-button type="primary" block @click="ok()">同意</van-button>
        </van-col>
        <van-col span="12">
            <van-button type="warning" block @click="ontOk()">不同意</van-button>
        </van-col>
    </div>

    <!-- <div v-if="xiaojia ">
        <van-col span="24">
            <van-button type="primary" block @click="xj(recordId,recordtype)">销假</van-button>
        </van-col>

    </div> -->
</div>
</template>

<script>
import {
    Step,
    Steps
} from 'vant';
import Cookies from 'js-cookie'
import request from '@/utils/request'
import {
    Dialog
} from "vant";
import {
    findOne,
    getTaskAuditList,
    approval
} from "@/api/fy";
import {
    Transformation,
} from '@/api/common'

import {
    parseTime,
} from '@/utils'
export default {

    data() {
        return {
            recordType: '',
            planStartTime: '',
            planEndTime: '',
            planSumTime: '',
            planStartDetailTime: '',
            planEndDetailTime: '',
            isLeaveGz: '',
            reson: '',
            name: '',
            //状态
            recordStatusContent: '',
            abroadPassportuserName: '',
            taskData: '',
            dataLengh: '',
            tijiao: false,
            chehui: false,
            shanchu: false,
            bianji: false,
            myself: false,
            approval: false,
            sangjia: false,
            burujia: false,
            chanjia: false,
            xiaojia: false,
            pcj: false,
            liuchan: '',
            recordId: '',
            recordtype: '',
            organizationName: '',
            userName: '',
            birthday: '',
            contraceptionType: '',
            number: '',
            nanchan: '',
            huaiyunshijian: '',
            jyj: false,
            hlj: false,
            isOnlyChild: '',
            parentBirthday: '',
            hospitalName: '',

        };
    },
    created() {
        this.find();
        this.recordId = this.$route.params.recordId,
            this.recordtype = this.$route.params.recordType,
            this.approval = this.$route.params.approval

        this.organizationName = Cookies.get('organizationName')
        this.userName = Cookies.get('userName')

    },
    methods: {
        onClickLeft() {

            this.$router.go(-1);
        },
        find() {
            const obj = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType
            }
            console.log(obj)
            var userId = Cookies.get("userId");
            findOne(obj).then(res => {
                console.log(res.data.record)
                var shuju = res.data.record;
                this.recordType = Transformation(shuju.recordType)
                this.planStartTime = parseTime(new Date(shuju.planStartTime).getTime() / 1000, '{y}-{m}-{d} {h}:{i}:{s}')
                this.planEndTime = parseTime(new Date(shuju.planEndTime).getTime() / 1000, '{y}-{m}-{d} {h}:{i}:{s}')
                this.planSumTime = shuju.planSumTime
                this.planStartDetailTime = shuju.planStartDetailTime == 0 ? '上午' : '下午'
                this.planEndDetailTime = shuju.planEndDetailTime == 0 ? '上午' : '下午'
                this.isLeaveGz = shuju.isLeaveGz == 0 ? '离开' : '不离开'
                this.recordStatusContent = shuju.recordStatusContent
                this.reson = shuju.reason
                //如果是自己登陆则请假详情会有草稿提交以及相应功能 如果是上级登陆则没有相应按钮，只能查看详情信息
                if (userId == shuju.userId) {
                    this.myself = true
                }
                //根据请假状态判断是提交还是撤回
                if (shuju.status == "11" || shuju.status == "3" || shuju.status == "1") {
                    this.tijiao = true
                    this.shanchu = true
                    this.bianji = true
                } else if (shuju.status == "2") {
                    this.chehui = true
                }
                if (shuju.recordTypeCode == 'LEAVE_COMPENSATED') {
                    this.xiaojia = true
                }
                //丧假
                if (shuju.recordType == 'LEAVE_FUNERAL' || shuju.recordType == 'LEAVE_VISIT_PARENT' || shuju.recordType == 'LEAVE_VISIT_SPOUSE') {
                    this.sangjia = true
                    this.distanceTime = shuju.distanceTime
                    this.place = shuju.place
                }
                //哺乳假
                if (shuju.recordType == 'LEAVE_BREASTFEEDING') {
                    this.burujia = true
                    this.birthday = shuju.birthday

                }
                //产假
                if (shuju.recordType == 'LEAVE_MATERNITY') {

                    this.chanjia = true
                    var i = shuju.maternityType;
                    if (i == 0) {
                        this.contraceptionType = '正常分娩'
                        this.number = shuju.maternityCount;
                        var t = shuju.maternityDetailType;

                        if (t == 0) {
                            this.nanchan = '否';
                        } else if (t == 1) {
                            this.nanchan = '难产(如剖腹产、Ⅲ度会阴破裂者)';
                        } else if (t == 2) {
                            this.nanchan = '吸引产、钳产、臀位牵引产';
                        }
                    } else if (i == 1) {
                        this.liuchan = true
                        this.chanjia = false
                        this.contraceptionType = '流产'
                        var i = shuju.maternityType;
                        if (i == 0) {
                            this.huaiyunshijian = '怀孕未满2个月';
                        } else if (i == 1) {
                            this.huaiyunshijian = ' 怀孕2个月以上 4个月以下';
                        } else if (i == 2) {
                            this.huaiyunshijian = '  怀孕4个月以上 4个月以下';
                        } else if (i == 3) {
                            this.huaiyunshijian = '   怀孕7个月及以上';
                        }
                    }
                }
                //节育假
                if (shuju.recordType == 'LEAVE_CONTRACEPTION') {
                    this.jyj = true
                    var i = res.data.record.contraceptionType;
                    alert(i)
                    if (i == 0) {
                        this.contraceptionType = "放置宫内节育器 可休3天";
                    } else if (i == 1) {
                        this.contraceptionType = '取宫内节育器 可休2天';
                    } else if (i == 2) {
                        this.contraceptionType = ' 输精管结扎 可休10天';
                    } else if (i == 3) {
                        this.contraceptionType = ' 输卵管结扎 可休30天';
                    } else if (i == 4) {
                        this.contraceptionType = ' 施行输卵(精)管复通术 可休14天';
                    } else if (i == 5) {
                        this.contraceptionType = ' 接受皮下埋植术和皮埋剂取出术 可休3天';
                    }
                }
                //护理假
                if (shuju.recordType == 'LEAVE_NURSING') {
                    this.hlj = true
                    this.parentBirthday = shuju.parentBirthday
                    this.hospitalName = shuju.hospitalName
                    var i = shuju.isOnlyChild;
                    if (i == 0) {
                        this.isOnlyChild = '不是';
                    } else {
                        this.isOnlyChild = '是';
                    }
                }

                //陪产假
                if (shuju.recordType == 'LEAVE_PATERNITY') {
                    this.pcj = true
                    var i = shuju.paternityType;
                    if (i == 0) {
                        this.contraceptionType = '不满4个月施行终止妊娠手术';
                    } else if (i == 1) {
                        this.contraceptionType = '施行结扎手术';
                    } else if (i == 2) {
                        this.contraceptionType = '  怀孕4个月以上施行终止妊娠手术';
                    } else if (i == 3) {
                        this.contraceptionType = '    符合法律、法规规定生育子女陪产';
                    }
                }

            })
            var id = {
                recordId: this.$route.params.recordId
            }
            getTaskAuditList(id).then(res => {
                console.log(res.data, 'task')
                this.taskData = res.data;
                this.dataLengh = res.data.length - 1
                this.abroadPassportuserName = res.data[0].userName;
                // if (res.data.length == 2) {
                //     this.i = 1
                //     this.i1 = 1
                // } else if (this.dataLengh == 3) {
                //     this.i1 = 2
                //     document.getElementById("three").style.cssText = 'display:block'
                // }
            })
        },
        getLocalTime(time) {
            var date = new Date(time); //获取一个时间对象
            var day = date.getFullYear() + '年' + Number(date.getMonth() + 1) + '月' + date.getDate() + '日' + date.getHours() + '时' + date.getMinutes() + '分'
            return day;
        },
        save() {
            var tijiaodata = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,
            }
            this.$axios({
                method: 'post',
                url: 'leaveApply/submitToAudit',
                data: this.zhuanfunction(tijiaodata)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }

            })

        },
        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        ch() {
            var data = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,
            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'leaveApply/cancel',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },

        sc() {
            var data = {
                recordId: this.$route.params.recordId,
                0: this.$route.params.recordId,
            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'leaveApply/delete',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        ok() {
            var data = {
                recordId: this.$route.params.recordId,
                isAgree: 1,
            }
            approval(data).then(res => {
                if (res.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: res.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        ontOk() {
            var data = {
                recordId: this.$route.params.recordId,
                isAgree: 0,
            }
            approval(data).then(res => {
                if (res.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: res.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        xj(recordId, recordType) {
            this.$router.push({
                name: 'xjsq',
                params: {
                    recordId: recordId,
                    recordType: recordType,
                    xxx: true
                }
            })
        },
        bj(recordId, recordType) {
            if (recordType == "LEAVE_ANNUAL") {
                this.$router.push({
                    name: 'nxj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_COMPENSATED") {
                this.$router.push({
                    name: 'txj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_VISIT_PARENT") {
                this.$router.push({
                    name: 'tqjfm',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_VISIT_SPOUSE") {
                this.$router.push({
                    name: 'tqjpo',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_BREASTFEEDING") {
                this.$router.push({
                    name: 'brj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })

            } else if (recordType == "LEAVE_CONTRACEPTION") {
                this.$router.push({
                    name: 'jyj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_FUNERAL") {
                this.$router.push({
                    name: 'sangj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_MARRIAGE") {
                this.$router.push({
                    name: 'hj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_MATERNITY") {
                this.$router.push({
                    name: 'cj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_NURSING") {
                this.$router.push({
                    name: 'hlj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_PATERNITY") {
                this.$router.push({
                    name: 'pcj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_PERSONAL") {
                this.$router.push({
                    name: 'sj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            } else if (recordType == "LEAVE_SICK") {
                this.$router.push({
                    name: 'bj',
                    params: {
                        recordId: recordId,
                        recordType: recordType
                    }
                })
            }
        }

    },

}
</script>

<style scoped>
.heightF{
    height: calc(100vh - 90px);
    overflow-y: scroll;
}
</style >
